<template>
	<view>
		<view class="top">
			<navigator url="/pages/index/index" open-type="switchTab">
				<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
			</navigator>
			<view class="title">保养</view>
		</view>

		<view style="margin-top: -240rpx;">
			<uni-card>
				<image class="image" :src="merchantImage" mode=""></image>
				<view class="carView">
					<!-- 左边部分 -->
					<view class="carItem1">
						<view>{{ merchant.name }}</view>
						<uni-rate :size="16" :value="merchant.rate" :readonly="true" />
						<view>最高评分：{{ merchant.rate }}分</view>
						<view>营业时间：8:00-22:00</view>
						<view>位置：{{ merchant.address }}</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view class="fwView">
			<view>服务项目</view>
			<view v-for="(item, index) in service" :key="item.id" class="fwItemCheckbox">
				<label @click="toggleService(item)">
					<view class="fwItem">
						<view>{{ item.serviceName }}</view>
						<view>￥ {{ item.serviceCurrentPrice }}</view>
						<view>￥ {{ item.serviceOriginalPrice }}</view>
					</view>
					<view class="fwIntro">{{ item.serviceInfo }}</view>
					<view>
						<checkbox :checked="isSelected(item.id)" style="transform: scale(0.7)" />
					</view>
				</label>
			</view>
		</view>

		<uni-popup ref="cartPopup" type="bottom">
			<view class="popup">
				<view v-for="item in selectedServices" :key="item.id" class="popup-item">
					<view>{{ item.serviceName }} - ￥{{ item.serviceCurrentPrice }}</view>
				</view>
				<view class="total">总价：￥{{ totalPrice.toFixed(2) }}</view>
				<button @click="goOrder">确认服务</button>
			</view>
		</uni-popup>


		<view class="comment-container">
			<view class="comment-title">用户评价</view>
			<view class="pjItem" v-for="(item, index) in comments" :key="index">
				<image class="img" :src="item.userInfo.avatar"></image>
				<view class="pj">
					<view>{{ item.userInfo.userName || '匿名用户' }}</view>
					<uni-rate :size="16" :value="item.score" :readonly="true" />
					<view>{{ item.commentTime }}</view>
					<view>{{ item.comment }}</view>
				</view>
			</view>
		</view>

		<view class="btn">
			<button class="btn1" @click="showCart">购物车（{{ selectedServices.length }}）</button>
			<button class="btn2" @click="goOrder">确认服务</button>
		</view>


	</view>
</template>

<script>
	import request from '../../../uitls/request';
	export default {
		data() {
			return {
				comments: [],
				merchantId: '',
				merchant: {},
				merchantImage: '',
				selectedServices: [],
				service: [{
						id: 1,
						serviceName: '保养轮胎',
						serviceInfo: '保养轮胎，让你的发动机焕然一新',
						serviceOriginalPrice: '30.00',
						serviceCurrentPrice: '23.15'
					},
					{
						id: 2,
						serviceName: '合成机油',
						serviceInfo: '专业机油',
						serviceOriginalPrice: '50.00',
						serviceCurrentPrice: '31.44'
					}
				],
			}
		},
		methods: {
			isSelected(id) {
				return this.selectedServices.some(item => item.id === id);
			},
			toggleService(serviceItem) {
				const index = this.selectedServices.findIndex(item => item.id === serviceItem.id);
				if (index >= 0) {
					this.selectedServices.splice(index, 1);
				} else {
					this.selectedServices.push(serviceItem);
				}
			},
			showCart() {
				this.$refs.cartPopup.open();
			},
			goOrder() {
				const selected = encodeURIComponent(JSON.stringify(this.selectedServices));
				const merchantId = this.merchantId;
				uni.navigateTo({
					url: `/pages/zwj/baoyangOrder/baoyangOrder?selectedServices=${selected}&merchantId=${merchantId}`
				});
			},
			getMerchant() {
				request({
					url: '/merchant/merchant/' + this.merchantId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.merchant = res.data.data
					}
				})
			},
			getMerchantImage() {
				request({
					url: '/merchant/imgs/' + this.merchantId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.merchantImage = res.data.data[0].img
					}
				})
			},
			getComment() {
				const that = this;
				request({
					url: '/evaluate/evaluate/list',
					method: 'GET',
					data: {
						merchantId: that.merchantId
					},
					success: async (res) => {
						const commentList = res.data.rows;
						console.log(commentList)
						// 等待所有 userInfo 请求完成
						const commentWithUserInfo = await Promise.all(commentList.map(async comment => {
							try {
								const userRes = await new Promise((resolve, reject) => {
									request({
										url: '/bigbase/info/' + comment.userId,
										method: 'GET',
										success: resolve,
										fail: reject
									});
								});
								comment.userInfo = userRes.data.data;
							} catch (error) {
								comment.userInfo = null;
							}
							return comment;
						}));
						that.comments = commentWithUserInfo;
					}
				});
			}
		},
		computed: {
			totalPrice() {
				return this.selectedServices.reduce((sum, item) => sum + parseFloat(item.serviceCurrentPrice), 0);
			}
		},
		onLoad(options) {
			this.merchantId = options.id
			this.getMerchant()
			this.getMerchantImage()
			this.getComment()
		}
	}
</script>

<style scoped>
	/* 背景图片 */
	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}

	image {
		width: 610rpx;
		height: 350rpx;
		padding-top: 10rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.carView {
		margin-top: 35rpx;
		margin-bottom: 22rpx;

	}

	.carItem1>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.carItem1>view:nth-child(3) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(4) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(5) {
		font-size: 22rpx;
		font-weight: bold;
	}

	.carItem1>view:nth-child(6) {
		font-size: 22rpx;
		color: royalblue;
		font-weight: bold;
	}

	.fwView {
		background-color: white;
		width: 660rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 20rpx;
		border: 1rpx solid gray;
		border-radius: 20rpx;
	}

	/* 服务信息 */
	.fwView>view:nth-child(1) {
		font-size: 33rpx;
		font-weight: bold;
		margin: 20rpx 0rpx;
	}

	.fwItem {
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.fwItem>view:nth-child(1) {
		font-size: 28rpx;
		font-weight: bold;
		color: cornflowerblue;
	}

	.fwItem>view:nth-child(2) {
		font-size: 28rpx;
		color: red;
		margin-left: 300rpx;
	}

	.fwItem>view:nth-child(3) {
		text-decoration: line-through;
		font-size: 28rpx;
		color: gray;
		margin-left: 20rpx;
	}

	.fwIntro {
		font-size: 25rpx;
		/* font-weight: bold; */
		color: darkgray;
	}

	.comment-container {
		width: 87%;
		margin-left: auto;
		margin-right: auto;
		background-color: white;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.comment-title {
		font-size: 35rpx;
		font-weight: bold;
		color: #6a6a6a;
		margin-top: 10rpx;
		margin-left: 14rpx;
	}

	.pjItem {
		height: 180rpx;
		display: flex;
		margin-top: 25rpx;
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 40rpx;
	}

	.pj {
		width: 300rpx;
		margin-left: 30rpx;
	}

	.pj>view:nth-child(1) {
		font-size: 25rpx;
		font-weight: bold;
	}

	.pj>view:nth-child(3) {
		font-size: 20rpx;
	}

	.pj>view:nth-child(4) {
		font-size: 25rpx;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-left: 50rpx;
	}

	.btn {
		display: flex;
		margin-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.btn1 {
		width: 240rpx;
		height: 70rpx;
		background-color: #0662e6;
		color: white;
		line-height: 70rpx;
		border-radius: 30rpx;
	}

	.btn2 {
		width: 240rpx;
		height: 70rpx;
		background-color: #ff4000;
		color: white;
		line-height: 70rpx;
		border-radius: 30rpx;
	}

	.popup {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 100;
	}

	.popup-item {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.total {
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 20rpx;
		text-align: right;
	}
</style>